<!--使用说明-->
<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar
      title="使用说明"
      left-arrow
      @click-left="onClickLeft"
      class="navheadrt"
    ></van-nav-bar>
    <div v-if="pdfsrc">
      <div class="pdf" v-show="fileType === 'pdf'">
        <!-- // 自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了 -->
        <pdf
          :src="pdfsrc"
          :page="currentPage"
          @num-pages="pageCount = $event"
          @page-loaded="currentPage = $event"
          @loaded="loadPdfHandler"
        >
        </pdf>
      </div>
      <div class="page f fa">
        <!-- // 上一页 -->
        <div
          @click="changePdfPage(0)"
          class="arrow f fc"
          :class="{ grey: currentPage == 1 }"
        >
          上一页
        </div>
        <div class="num">{{ currentPage }} / {{ pageCount }}</div>
        <!-- // 下一页 -->
        <div
          @click="changePdfPage(1)"
          class="arrow f fc"
          :class="{ grey: currentPage == pageCount }"
        >
          下一页
        </div>
      </div>
    </div>
    <div v-else class="nodata"><img :src="nodata" alt="" /></div>
  </div>
  <!-- <div>
    <pdf :src="pdfsrc" ></pdf>
  </div> -->
</template>

<script>
import pdf from "vue-pdf";
import { GetNewOperationManual } from "@/api/api";
export default {
  data() {
    return {
      nodata: require("./imgs/nodata.png"),
      pdfsrc: "",
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: "pdf", // 文件类型
    };
  },
  components: {
    pdf,
  },
  mounted() {
    this.init();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    init() {
       this.$toast.loading({
        mask: true,
        message: "加载中...",
        className: "my-toast",
      });
      this.Request(GetNewOperationManual()).then((res) => {
        if (res.StatusCode == "200") {
           this.$toast.clear();
          this.pdfsrc = res.Detiel[0].OperationFile;
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
@import '~@/assets/css/resetVant.css';
.nodata {
  width: 100%;
  height: 100%;
  margin: 100px 0;
  text-align: center;

  img {
    width: 60%;
  }
}

.navheadrt {
  /deep/ .van-nav-bar__title, /deep/.van-icon {
    color: #fff !important;
  }
}

.pdf {
  width: 100%;
  height: 80%;
  overflow: hidden;
}

.van-nav-bar {
  background: #699FFF;
  color: #fff !important;
  margin-bottom: 30px;
  height: 88px;
}

.van-nav-bar__title, .van-nav-bar__left, .van-nav-bar__right {
  color: #fff;
}

.van-icon-arrow-left {
  color: #fff;
  font-size: $font-size-title;
}

.page {
  margin-top: 40px;
}

.content {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}

.arrow {
  width: 150px;
  height: 60px;
  background: #000;
  color: #fff;
  font-size: 26px;
}

.num {
  color: #f00;
  font-size: 30px;
}
</style>